<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="H5,">










<meta name="description" content="简述本例以Android移动端作为支撑，IOS的原理基本一致，但需要底层提供和Android端一致的api调用。 H5的代码一致，所以底层提供基本支撑代码以后，无需重复开发，使用一套H5代码。 技术要求1，springboot后台+Nginx代理 2，Android移动端 3，vue的H5前端 开发工具后台：idea 移动端：AndroidStudio H5：webstorm 展示效果">
<meta name="keywords" content="H5">
<meta property="og:type" content="article">
<meta property="og:title" content="JsBrige移动端H5开发及部署">
<meta property="og:url" content="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/index.html">
<meta property="og:site_name" content="晓远Blog">
<meta property="og:description" content="简述本例以Android移动端作为支撑，IOS的原理基本一致，但需要底层提供和Android端一致的api调用。 H5的代码一致，所以底层提供基本支撑代码以后，无需重复开发，使用一套H5代码。 技术要求1，springboot后台+Nginx代理 2，Android移动端 3，vue的H5前端 开发工具后台：idea 移动端：AndroidStudio H5：webstorm 展示效果">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/1546847049831.png">
<meta property="og:image" content="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/1546847107294.png">
<meta property="og:image" content="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/1546847128294.png">
<meta property="og:image" content="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/1546847565803.png">
<meta property="og:image" content="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/1546847745963.png">
<meta property="og:updated_time" content="2019-11-16T14:20:50.089Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JsBrige移动端H5开发及部署">
<meta name="twitter:description" content="简述本例以Android移动端作为支撑，IOS的原理基本一致，但需要底层提供和Android端一致的api调用。 H5的代码一致，所以底层提供基本支撑代码以后，无需重复开发，使用一套H5代码。 技术要求1，springboot后台+Nginx代理 2，Android移动端 3，vue的H5前端 开发工具后台：idea 移动端：AndroidStudio H5：webstorm 展示效果">
<meta name="twitter:image" content="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/1546847049831.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/">





  <title>JsBrige移动端H5开发及部署 | 晓远Blog</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?b7fbd9803fe7b8df6faf867c7b94ce2a";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">晓远Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://xxyuan.net/2019/01/08/JsBrige移动端H5开发及部署/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="晓远">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="晓远Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">JsBrige移动端H5开发及部署</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-01-08T14:12:31+08:00">
                2019-01-08
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/开发/" itemprop="url" rel="index">
                    <span itemprop="name">开发</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h4 id="简述"><a href="#简述" class="headerlink" title="简述"></a>简述</h4><p>本例以Android移动端作为支撑，IOS的原理基本一致，但需要底层提供和Android端一致的api调用。</p>
<p>H5的代码一致，所以底层提供基本支撑代码以后，无需重复开发，使用一套H5代码。</p>
<h4 id="技术要求"><a href="#技术要求" class="headerlink" title="技术要求"></a>技术要求</h4><p>1，springboot后台+Nginx代理</p>
<p>2，Android移动端</p>
<p>3，vue的H5前端</p>
<h4 id="开发工具"><a href="#开发工具" class="headerlink" title="开发工具"></a>开发工具</h4><p>后台：idea</p>
<p>移动端：AndroidStudio</p>
<p>H5：webstorm</p>
<h4 id="展示效果"><a href="#展示效果" class="headerlink" title="展示效果"></a>展示效果</h4><p><img src="/2019/01/08/JsBrige移动端H5开发及部署/1546847049831.png" alt="1546847049831"></p>
<a id="more"></a>
<p><img src="/2019/01/08/JsBrige移动端H5开发及部署/1546847107294.png" alt="1546847107294"></p>
<p><img src="/2019/01/08/JsBrige移动端H5开发及部署/1546847128294.png" alt="1546847128294"></p>
<h4 id="移动端核心code"><a href="#移动端核心code" class="headerlink" title="移动端核心code"></a>移动端核心code</h4><h5 id="界面"><a href="#界面" class="headerlink" title="界面"></a>界面</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.xiao.jsbrige.activity;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.support.v7.app.AppCompatActivity;</span><br><span class="line"><span class="keyword">import</span> android.os.Bundle;</span><br><span class="line"><span class="keyword">import</span> android.view.KeyEvent;</span><br><span class="line"><span class="keyword">import</span> android.view.View;</span><br><span class="line"><span class="keyword">import</span> android.widget.Button;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.BridgeWebView;</span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.DefaultHandler;</span><br><span class="line"><span class="keyword">import</span> com.xiao.jsbrige.R;</span><br><span class="line"><span class="keyword">import</span> com.xiao.jsbrige.jsbrige.XiaoCallHandler;</span><br><span class="line"><span class="keyword">import</span> com.xiao.jsbrige.jsbrige.XiaoRegisterHandler;</span><br><span class="line"><span class="keyword">import</span> com.xiao.jsbrige.jsbrige.XiaoWebChromeClient;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">XiaoDemoActivity</span> <span class="keyword">extends</span> <span class="title">AppCompatActivity</span> <span class="keyword">implements</span> <span class="title">View</span>.<span class="title">OnClickListener</span></span>&#123;</span><br><span class="line">    BridgeWebView webView;</span><br><span class="line">    Button button;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onCreate(savedInstanceState);</span><br><span class="line">        setContentView(R.layout.activity_xiao_demo);</span><br><span class="line">        initView();</span><br><span class="line">        initData();</span><br><span class="line">        initListener();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">initView</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        webView = (BridgeWebView) findViewById(R.id.webView);</span><br><span class="line">        button = (Button) findViewById(R.id.button);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">initData</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="comment">//webView初始化</span></span><br><span class="line">        webView.setDefaultHandler(<span class="keyword">new</span> DefaultHandler());</span><br><span class="line">        webView.setWebChromeClient(<span class="keyword">new</span> XiaoWebChromeClient());</span><br><span class="line"><span class="comment">//        webView.loadUrl("file:///android_asset/demo/demo.html");</span></span><br><span class="line">        webView.loadUrl(<span class="string">"http://192.168.22.91"</span>);</span><br><span class="line">        <span class="comment">//注册js调用java的代码</span></span><br><span class="line">        XiaoRegisterHandler.getInstance().submitFromWeb(webView);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">initListener</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        button.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onClick</span><span class="params">(View v)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (button.equals(v)) &#123;</span><br><span class="line">            XiaoCallHandler.getInstance().functionInJs(webView);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//使用Webview的时候，返回键没有重写的时候会直接关闭程序，这时候其实我们要其执行的知识回退到上一步的操作</span></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">onKeyDown</span><span class="params">(<span class="keyword">int</span> keyCode, KeyEvent event)</span> </span>&#123;</span><br><span class="line">        <span class="comment">//这是一个监听用的按键的方法，keyCode 监听用户的动作，如果是按了返回键，同时Webview要返回的话，WebView执行回退操作，因为mWebView.canGoBack()返回的是一个Boolean类型，所以我们把它返回为true</span></span><br><span class="line">        <span class="keyword">if</span>(keyCode== KeyEvent.KEYCODE_BACK&amp;&amp;webView.canGoBack())&#123;</span><br><span class="line">            webView.goBack();</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">super</span>.onKeyDown(keyCode, event);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="交互code"><a href="#交互code" class="headerlink" title="交互code"></a>交互code</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.xiao.jsbrige.jsbrige;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.util.Log;</span><br><span class="line"><span class="keyword">import</span> android.webkit.WebView;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.BridgeHandler;</span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.BridgeWebView;</span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.CallBackFunction;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">XiaoCallHandler</span> </span>&#123;</span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">final</span> String TAG = <span class="string">"XiaoCallHandler"</span>;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 单例使用</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">static</span> XiaoCallHandler instance;</span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> XiaoCallHandler <span class="title">getInstance</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (instance == <span class="keyword">null</span>) &#123;</span><br><span class="line">            <span class="keyword">synchronized</span> (XiaoCallHandler<span class="class">.<span class="keyword">class</span>) </span>&#123;</span><br><span class="line">                <span class="keyword">if</span> (instance == <span class="keyword">null</span>) &#123;</span><br><span class="line">                    instance = <span class="keyword">new</span> XiaoCallHandler();</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> instance;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 原生向js发送消息</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param</span> webView</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">functionInJs</span><span class="params">(BridgeWebView webView)</span></span>&#123;</span><br><span class="line">        webView.callHandler(<span class="string">"functionInJs"</span>, <span class="string">"java的functionInJs返回数据"</span>, <span class="keyword">new</span> CallBackFunction() &#123;</span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCallBack</span><span class="params">(String data)</span> </span>&#123;</span><br><span class="line">                Log.i(TAG, <span class="string">"functionInJs 方法 "</span> + data);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.xiao.jsbrige.jsbrige;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.util.Log;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.BridgeHandler;</span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.BridgeWebView;</span><br><span class="line"><span class="keyword">import</span> com.github.lzyzsd.jsbridge.CallBackFunction;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">XiaoRegisterHandler</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">final</span> String TAG = <span class="string">"XiaoRegisterHandler"</span>;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 使用单例</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">static</span> XiaoRegisterHandler instance;</span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> XiaoRegisterHandler <span class="title">getInstance</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (instance == <span class="keyword">null</span>) &#123;</span><br><span class="line">            <span class="keyword">synchronized</span> (XiaoRegisterHandler<span class="class">.<span class="keyword">class</span>) </span>&#123;</span><br><span class="line">                <span class="keyword">if</span> (instance == <span class="keyword">null</span>) &#123;</span><br><span class="line">                    instance = <span class="keyword">new</span> XiaoRegisterHandler();</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> instance;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 声明注册方案submitFromWeb</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param</span> webView</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">submitFromWeb</span><span class="params">(BridgeWebView webView)</span></span>&#123;</span><br><span class="line">        webView.registerHandler(<span class="string">"submitFromWeb"</span>, <span class="keyword">new</span> BridgeHandler() &#123;</span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">handler</span><span class="params">(String data, CallBackFunction function)</span> </span>&#123;</span><br><span class="line">                Log.i(TAG, <span class="string">"js调用原生返回的数据 "</span> + data);</span><br><span class="line">                function.onCallBack(<span class="string">"js调用原生返回的数据"</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="H5的code"><a href="#H5的code" class="headerlink" title="H5的code"></a>H5的code</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">connectWebViewJavascriptBridge</span>(<span class="params">callback</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">window</span>.WebViewJavascriptBridge) &#123;</span><br><span class="line">    callback(WebViewJavascriptBridge)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">document</span>.addEventListener(</span><br><span class="line">      <span class="string">'WebViewJavascriptBridgeReady'</span></span><br><span class="line">      , <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        callback(WebViewJavascriptBridge)</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="literal">false</span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">init</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  connectWebViewJavascriptBridge(<span class="function"><span class="keyword">function</span> (<span class="params">bridge</span>) </span>&#123;</span><br><span class="line">    bridge.init(<span class="function"><span class="keyword">function</span> (<span class="params">message, responseCallback</span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'JS got a message'</span>, message);</span><br><span class="line">      <span class="keyword">var</span> data = &#123;</span><br><span class="line">        <span class="string">'Javascript Responds'</span>: <span class="string">'测试中文!'</span></span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span> (responseCallback) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'JS responding with'</span>, data);</span><br><span class="line">        responseCallback(data);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    bridge.registerHandler(<span class="string">"functionInJs"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">data, responseCallback</span>) </span>&#123;</span><br><span class="line">      <span class="built_in">document</span>.getElementById(<span class="string">"show"</span>).innerHTML = (<span class="string">"原生调用js传输的数据: = "</span> + data);</span><br><span class="line">      <span class="keyword">if</span> (responseCallback) &#123;</span><br><span class="line">        <span class="keyword">var</span> responseData = <span class="string">"Javascript Says Right back aka!"</span>;</span><br><span class="line">        responseCallback(responseData);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">  init</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="H5中的使用"><a href="#H5中的使用" class="headerlink" title="H5中的使用"></a>H5中的使用</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div id=<span class="string">"show"</span>&gt;</span><br><span class="line">      &#123;&#123;msg&#125;&#125;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">    &lt;el-row&gt;</span></span><br><span class="line"><span class="regexp">      &lt;el-button type="primary" @click='submitFromWeb'&gt;调用Native方法&lt;/</span>el-button&gt;</span><br><span class="line">    &lt;<span class="regexp">/el-row&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>div&gt;</span><br><span class="line">&lt;<span class="regexp">/template&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  import &#123;init&#125; from '../</span>lib/init.js<span class="string">'</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  export default &#123;</span></span><br><span class="line"><span class="string">    name: "JsToJava",</span></span><br><span class="line"><span class="string">    data() &#123;</span></span><br><span class="line"><span class="string">      return &#123;</span></span><br><span class="line"><span class="string">        msg: '</span>显示初始化<span class="string">'</span></span><br><span class="line"><span class="string">      &#125;</span></span><br><span class="line"><span class="string">    &#125;,</span></span><br><span class="line"><span class="string">    mounted: function () &#123;</span></span><br><span class="line"><span class="string">      //初始化</span></span><br><span class="line"><span class="string">      init()</span></span><br><span class="line"><span class="string">    &#125;,</span></span><br><span class="line"><span class="string">    methods: &#123;</span></span><br><span class="line"><span class="string">      submitFromWeb: function () &#123;</span></span><br><span class="line"><span class="string">        console.log("触发submitFromWeb");</span></span><br><span class="line"><span class="string">        window.WebViewJavascriptBridge.callHandler(</span></span><br><span class="line"><span class="string">          '</span>submitFromWeb<span class="string">'</span></span><br><span class="line"><span class="string">          , &#123;'</span>param<span class="string">': '</span>中文测试<span class="string">'&#125;</span></span><br><span class="line"><span class="string">          , function (responseData) &#123;</span></span><br><span class="line"><span class="string">            document.getElementById("show").innerHTML = "js调用java = " + responseData</span></span><br><span class="line"><span class="string">          &#125;</span></span><br><span class="line"><span class="string">        );</span></span><br><span class="line"><span class="string">      &#125;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;style scoped&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/style&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="核心的简述（了解即可）"><a href="#核心的简述（了解即可）" class="headerlink" title="核心的简述（了解即可）"></a>核心的简述（了解即可）</h4><h5 id="Java调用js"><a href="#Java调用js" class="headerlink" title="Java调用js"></a>Java调用js</h5><p><img src="/2019/01/08/JsBrige移动端H5开发及部署/1546847565803.png" alt="1546847565803"></p>
<p>这个就是Java调用H5交互的核心，就是一个loadurl，但是对于每个调用都做了looper队列的再一次封装，但是核心就是调用这个方方法。</p>
<h5 id="js调用java"><a href="#js调用java" class="headerlink" title="js调用java"></a>js调用java</h5><p><img src="/2019/01/08/JsBrige移动端H5开发及部署/1546847745963.png" alt="1546847745963"></p>
<p>h5界面当中js调用java就是通过这个webviewclient来启动，这里返回的url即为包含的数据</p>
<p>这个方法为什么能够得到H5界面的数据呢？其实就是因为这个方法监听了界面的特定dom的超链接</p>
<p>js中发送过来的数据其实是触发了一个超链接，然后webclient得到以后经过一层层的过滤，然后再找到我们在java代码中注册的对应方法的地方。</p>
<h5 id="H5核心桥接js代码"><a href="#H5核心桥接js代码" class="headerlink" title="H5核心桥接js代码"></a>H5核心桥接js代码</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//notation: js file can only use this kind of comments</span></span><br><span class="line"><span class="comment">//since comments will cause error when use in webview.loadurl,</span></span><br><span class="line"><span class="comment">//comments will be remove by java use regexp</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">window</span>.WebViewJavascriptBridge) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> messagingIframe;</span><br><span class="line">    <span class="keyword">var</span> sendMessageQueue = [];</span><br><span class="line">    <span class="keyword">var</span> receiveMessageQueue = [];</span><br><span class="line">    <span class="keyword">var</span> messageHandlers = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> CUSTOM_PROTOCOL_SCHEME = <span class="string">'yy'</span>;</span><br><span class="line">    <span class="keyword">var</span> QUEUE_HAS_MESSAGE = <span class="string">'__QUEUE_MESSAGE__/'</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> responseCallbacks = &#123;&#125;;</span><br><span class="line">    <span class="keyword">var</span> uniqueId = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 创建队列iframe</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">_createQueueReadyIframe</span>(<span class="params">doc</span>) </span>&#123;</span><br><span class="line">        messagingIframe = doc.createElement(<span class="string">'iframe'</span>);</span><br><span class="line">        messagingIframe.style.display = <span class="string">'none'</span>;</span><br><span class="line">        doc.documentElement.appendChild(messagingIframe);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//set default messageHandler  初始化默认的消息线程</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">init</span>(<span class="params">messageHandler</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (WebViewJavascriptBridge._messageHandler) &#123;</span><br><span class="line">            <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'WebViewJavascriptBridge.init called twice'</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        WebViewJavascriptBridge._messageHandler = messageHandler;</span><br><span class="line">        <span class="keyword">var</span> receivedMessages = receiveMessageQueue;</span><br><span class="line">        receiveMessageQueue = <span class="literal">null</span>;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; receivedMessages.length; i++) &#123;</span><br><span class="line">            _dispatchMessageFromNative(receivedMessages[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 发送</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">send</span>(<span class="params">data, responseCallback</span>) </span>&#123;</span><br><span class="line">        _doSend(&#123;</span><br><span class="line">            data: data</span><br><span class="line">        &#125;, responseCallback);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 注册线程 往数组里面添加值</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">registerHandler</span>(<span class="params">handlerName, handler</span>) </span>&#123;</span><br><span class="line">        messageHandlers[handlerName] = handler;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 调用线程</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">callHandler</span>(<span class="params">handlerName, data, responseCallback</span>) </span>&#123;</span><br><span class="line">        _doSend(&#123;</span><br><span class="line">            handlerName: handlerName,</span><br><span class="line">            data: data</span><br><span class="line">        &#125;, responseCallback);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//sendMessage add message, 触发native处理 sendMessage</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">_doSend</span>(<span class="params">message, responseCallback</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (responseCallback) &#123;</span><br><span class="line">            <span class="keyword">var</span> callbackId = <span class="string">'cb_'</span> + (uniqueId++) + <span class="string">'_'</span> + <span class="keyword">new</span> <span class="built_in">Date</span>().getTime();</span><br><span class="line">            responseCallbacks[callbackId] = responseCallback;</span><br><span class="line">            message.callbackId = callbackId;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        sendMessageQueue.push(message);</span><br><span class="line">        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + <span class="string">'://'</span> + QUEUE_HAS_MESSAGE;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 提供给native调用,该函数作用:获取sendMessageQueue返回给native,由于android不能直接获取返回的内容,所以使用url shouldOverrideUrlLoading 的方式返回内容</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">_fetchQueue</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> messageQueueString = <span class="built_in">JSON</span>.stringify(sendMessageQueue);</span><br><span class="line">        sendMessageQueue = [];</span><br><span class="line">        <span class="comment">//android can't read directly the return data, so we can reload iframe src to communicate with java</span></span><br><span class="line">        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + <span class="string">'://return/_fetchQueue/'</span> + <span class="built_in">encodeURIComponent</span>(messageQueueString);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//提供给native使用,</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">_dispatchMessageFromNative</span>(<span class="params">messageJSON</span>) </span>&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> message = <span class="built_in">JSON</span>.parse(messageJSON);</span><br><span class="line">            <span class="keyword">var</span> responseCallback;</span><br><span class="line">            <span class="comment">//java call finished, now need to call js callback function</span></span><br><span class="line">            <span class="keyword">if</span> (message.responseId) &#123;</span><br><span class="line">                responseCallback = responseCallbacks[message.responseId];</span><br><span class="line">                <span class="keyword">if</span> (!responseCallback) &#123;</span><br><span class="line">                    <span class="keyword">return</span>;</span><br><span class="line">                &#125;</span><br><span class="line">                responseCallback(message.responseData);</span><br><span class="line">                <span class="keyword">delete</span> responseCallbacks[message.responseId];</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="comment">//直接发送</span></span><br><span class="line">                <span class="keyword">if</span> (message.callbackId) &#123;</span><br><span class="line">                    <span class="keyword">var</span> callbackResponseId = message.callbackId;</span><br><span class="line">                    responseCallback = <span class="function"><span class="keyword">function</span>(<span class="params">responseData</span>) </span>&#123;</span><br><span class="line">                        _doSend(&#123;</span><br><span class="line">                            responseId: callbackResponseId,</span><br><span class="line">                            responseData: responseData</span><br><span class="line">                        &#125;);</span><br><span class="line">                    &#125;;</span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line">                <span class="keyword">var</span> handler = WebViewJavascriptBridge._messageHandler;</span><br><span class="line">                <span class="keyword">if</span> (message.handlerName) &#123;</span><br><span class="line">                    handler = messageHandlers[message.handlerName];</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="comment">//查找指定handler</span></span><br><span class="line">                <span class="keyword">try</span> &#123;</span><br><span class="line">                    handler(message.data, responseCallback);</span><br><span class="line">                &#125; <span class="keyword">catch</span> (exception) &#123;</span><br><span class="line">                    <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">console</span> != <span class="string">'undefined'</span>) &#123;</span><br><span class="line">                        <span class="built_in">console</span>.log(<span class="string">"WebViewJavascriptBridge: WARNING: javascript handler threw."</span>, message, exception);</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//提供给native调用,receiveMessageQueue 在会在页面加载完后赋值为null,所以</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">_handleMessageFromNative</span>(<span class="params">messageJSON</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(messageJSON);</span><br><span class="line">        <span class="keyword">if</span> (receiveMessageQueue) &#123;</span><br><span class="line">            receiveMessageQueue.push(messageJSON);</span><br><span class="line">        &#125;</span><br><span class="line">        _dispatchMessageFromNative(messageJSON);</span><br><span class="line">       </span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> WebViewJavascriptBridge = <span class="built_in">window</span>.WebViewJavascriptBridge = &#123;</span><br><span class="line">        init: init,</span><br><span class="line">        send: send,</span><br><span class="line">        registerHandler: registerHandler,</span><br><span class="line">        callHandler: callHandler,</span><br><span class="line">        _fetchQueue: _fetchQueue,</span><br><span class="line">        _handleMessageFromNative: _handleMessageFromNative</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> doc = <span class="built_in">document</span>;</span><br><span class="line">    _createQueueReadyIframe(doc);</span><br><span class="line">    <span class="keyword">var</span> readyEvent = doc.createEvent(<span class="string">'Events'</span>);</span><br><span class="line">    readyEvent.initEvent(<span class="string">'WebViewJavascriptBridgeReady'</span>);</span><br><span class="line">    readyEvent.bridge = WebViewJavascriptBridge;</span><br><span class="line">    doc.dispatchEvent(readyEvent);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/H5/" rel="tag"># H5</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/01/03/SpringBoot04-Mybatis整合/" rel="next" title="SpringBoot03--Mybatis整合">
                <i class="fa fa-chevron-left"></i> SpringBoot03--Mybatis整合
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/01/09/springcloud-01-简述及Eureka服务中心/" rel="prev" title="springcloud_01-简述及Eureka服务中心">
                springcloud_01-简述及Eureka服务中心 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">晓远</p>
              <p class="site-description motion-element" itemprop="description">这个一个关于博客的个人网站</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">51</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">37</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#简述"><span class="nav-number">1.</span> <span class="nav-text">简述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#技术要求"><span class="nav-number">2.</span> <span class="nav-text">技术要求</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#开发工具"><span class="nav-number">3.</span> <span class="nav-text">开发工具</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#展示效果"><span class="nav-number">4.</span> <span class="nav-text">展示效果</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#移动端核心code"><span class="nav-number">5.</span> <span class="nav-text">移动端核心code</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#界面"><span class="nav-number">5.1.</span> <span class="nav-text">界面</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#交互code"><span class="nav-number">5.2.</span> <span class="nav-text">交互code</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#H5的code"><span class="nav-number">6.</span> <span class="nav-text">H5的code</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#H5中的使用"><span class="nav-number">6.1.</span> <span class="nav-text">H5中的使用</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#核心的简述（了解即可）"><span class="nav-number">7.</span> <span class="nav-text">核心的简述（了解即可）</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#Java调用js"><span class="nav-number">7.1.</span> <span class="nav-text">Java调用js</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#js调用java"><span class="nav-number">7.2.</span> <span class="nav-text">js调用java</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#H5核心桥接js代码"><span class="nav-number">7.3.</span> <span class="nav-text">H5核心桥接js代码</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-snowflake-o"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">晓远</span>

  
</div>









        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
